<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="编码">
              <!-- 这里不能有code 查询的时候后端page类里有个code 重名了 -->
              <a-input v-model:value.trim="productWhere.keywords" placeholder="请输入编码" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="产品">
              <a-input v-model:value.trim="productWhere.name" placeholder="请输入产品" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="规格">
              <a-input v-model:value.trim="productWhere.specification" placeholder="请输入规格" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item :wrapper-col="{ span: 24 }">
              <em></em>
              <a-space>
                <a-button type="primary" @click="productReload">查询</a-button>
                <a-button @click="productReset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table ref="productTableRef" row-key="id" :columns="columns" :datasource="datasource"
        @update:selection="productTableOnSelectionChange" :customRow="productTableRowClick"
        v-model:current="currentProductTableSelect" :scroll="{ x: 1000 }" cacheKey="product">
      </ele-pro-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { toDateString } from 'ele-admin-pro';
import useFormData from '@/utils/use-form-data';
import { message } from 'ant-design-vue';
import { TIME_OUT } from '@/config/damon';

import { pageProduct, removeProduct, addProduct, updateProduct } from '@/api/store/product';

// 表格实例
const productTableRef = ref(null);

// 表格列配置
const columns = ref([
  {
    key: 'index',
    width: 48,
    align: 'center',
    fixed: 'left',
    hideInSetting: true,
    customRender: ({ index }) => index + (productTableRef.value?.tableIndex ?? 0)
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    sorter: true
  },
  {
    title: '编码',
    dataIndex: 'code',
    key: 'code',
    sorter: true
  },
  {
    title: '规格',
    dataIndex: 'specification',
    key: 'specification',
    sorter: true
  },
  {
    title: '长度',
    dataIndex: 'lengths',
    key: 'lengths',
    sorter: true
  },
  {
    title: '负差',
    dataIndex: 'negative',
    key: 'negative',
    sorter: true
  },
  {
    title: '理论质量',
    dataIndex: 'liweight',
    key: 'liweight',
    sorter: true
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    sorter: true
  },
  {
    title: '排序',
    dataIndex: 'ordernum',
    key: 'ordernum',
    hideInTable: true,
    sorter: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    resizable: true,
    width: 150,
    ellipsis: true,
    hideInTable: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '创建人',
    dataIndex: 'createName',
    key: 'createName',
    hideInTable: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    resizable: true,
    width: 150,
    ellipsis: true,
    hideInTable: true,
    customRender: ({ text }) => toDateString(text)
  },
  {
    title: '更新人',
    dataIndex: 'updateName',
    key: 'updateName',
    hideInTable: true,
  },
]);

// 表单数据
const { form: productWhere, resetFields } = useFormData({
  username: '',
  sex: undefined
});

// 表格数据源
const datasource = ({ page, limit, where, orders }) => {
  orders.sort = orders.sort == 'updateTime' ? 'update_time' : orders.sort
  orders.sort = orders.sort == 'createTime' ? 'create_time' : orders.sort
  return pageProduct({ ...where, ...orders, page, limit });
};

/* 搜索 */
const productReload = () => {
  productTableRef?.value?.reload({ page: 1, where: productWhere });
};
const productReload2 = () => {
  productTableRef?.value?.reload();
};

let productWhere_timeout = 0
watch(() => productWhere, (val) => {
  clearTimeout(productWhere_timeout)
  productWhere_timeout = setTimeout(() => {
    productReload();
  }, TIME_OUT);
},
  { deep: true }
)

/*  重置 */
const productReset = () => {
  resetFields();
  productReload();
};


//库存选择
const currentProductTableSelect = ref(null);

let productTableRowClick = (record, index) => {
  return {
    onClick: (event) => {
      currentProductTableSelect.value = record
    },
  }
}
let productTableOnSelectionChange = (current_options) => {
  currentProductTableSelect.value = current_options[0];
};
const selectedProduct = (op) => {
  emit('pSelect_s', {
    'currentProductTableSelect': currentProductTableSelect,
  });
};
defineExpose({ selectedProduct })
const emit = defineEmits(['pSelect_s'])


// 当前选中数据
const productCurrent = ref(null);

// 弹窗是否打开
const productVisible_modal = ref(false);

// 是否是修改
const productIsUpdate = ref(false);

// 提交状态
const loading = ref(false);

//
const productFormRef = ref(null);

// 表单数据
const { form: productForm, resetFields: productResetFormFields } = useFormData({
  id: undefined,
  customer: '',
  vessel: '',
});

</script>

<script>
export default {
  name: 'ProductComp'
};
</script>
